﻿@page "/documentation/grid-widget"
@using Blazor.Diagrams.Core.PathGenerators;
@using Blazor.Diagrams.Core.Routers;
@layout DocumentationLayout
@inherits DocumentationPage

<PageTitle>Grid Widget - Documentation - Blazor Diagrams</PageTitle>

<h1>Grid Widget</h1>

<p>
    A <code>GridWidget</code> is simply a customizable background with a grid pattern.<br />
	It adjusts itself based on the current panning / zoom.
</p>

<h2>Options</h2>

<table>
    <thead>
        <tr>
			<th>Name</th>
			<th>Type</th>
            <th>Default</th>
        </tr>
    </thead>
    <tbody>
		<tr>
			<td>Size</td>
			<td>double</td>
			<td>20</td>
		</tr>
		<tr>
			<td>ZoomThreshold</td>
			<td>double</td>
			<td>0</td>
		</tr>
		<tr>
			<td>Mode</td>
			<td>GridMode (Line or Point)</td>
			<td>GridMode.Line</td>
		</tr>
		<tr>
			<td>BackgroundColor</td>
			<td>string</td>
			<td>rgb(241 241 241)</td>
		</tr>
    </tbody>
</table>

<h2>Usage</h2>

<pre><code class="language-cshtml">
&lt;CascadingValue Value=&quot;_diagram&quot; IsFixed=&quot;true&quot;&gt;
	&lt;DiagramCanvas&gt;
		&lt;Widgets&gt;
			&lt;GridWidget Size=&quot;30&quot; Mode=&quot;GridMode.Line&quot; BackgroundColor=&quot;white&quot; /&gt;
		&lt;/Widgets&gt;
	&lt;/DiagramCanvas&gt;
&lt;/CascadingValue&gt;
</code></pre>

<div class="diagram-container" style="width: 100%; height: 300px; position: relative;">
    <CascadingValue Value="_diagram" IsFixed="true">
        <DiagramCanvas>
			<Widgets>
				<GridWidget Size="30" Mode="@(GridPoints ? GridMode.Point : GridMode.Line)" BackgroundColor="white" />
			</Widgets>
		</DiagramCanvas>
	</CascadingValue>
	<div class="bg-white text-gray-600" style="position: absolute; bottom: 15px; left: 15px;">
		<input id="gridPointsCheckbox" type="checkbox" @bind-value="@GridPoints" />
		<label for="gridPointsCheckbox">Grid Points</label>
	</div>
</div>

<NavigationButtons PreviousTitle="Navigator"
                   PreviousLink="/documentation/navigator-widget"
				   NextTitle="Selection Box"
                   NextLink="/documentation/selection-box-widget" />

@code {
    private BlazorDiagram _diagram = new();
	private bool _gridPoints;

	public bool GridPoints
	{
		get => _gridPoints;
		set
		{
			_gridPoints = value;
			_diagram.Refresh();
		}
	}

    protected override void OnInitialized()
    {
        _diagram.Options.Zoom.Enabled = false;

		var node1 = _diagram.Nodes.Add(new NodeModel(new Point(100, 100)));
		var node2 = _diagram.Nodes.Add(new NodeModel(new Point(500, 150)));
		_diagram.Links.Add(new LinkModel(node1, node2)
		{
			PathGenerator = new StraightPathGenerator()
		});
    }
}